import React, { Component } from 'react';
import { messages } from 'share/common';
import { Button, Col, Input, message, Row, Tag, Tooltip } from 'antd';
import 'styles/expense-reimbursement-control/mileage-subsidy/new-mileage-subsidy.scss';

class LadderMileage extends Component {

  static propTypes = {
    value: React.PropTypes.array
  };

  static defaultProps = {
    value: []
  };

  state = {
    inputValue: false
  };


  showInput = () => {
    this.setState({ inputVisible: true });
  };

  handleClose = (removedTag) => {
    let { value } = this.props;
    value = value.filter(tag => tag !== removedTag);
    this.props.onChange(value);
  };

  handleInputConfirm = (e) => {
    e.stopPropagation();
    const inputValue = e.target.value;
    let { value } = this.props;
    const reg = /^[0-9]+([.]+?[0-9]{1,2})?$/;
    if (!reg.test(inputValue)) {
      message.error(messages('expense-12.key140')/*输入不合规范，请按照范例样式输入*/);
      return;
    } else if (inputValue < value[value.length - 2]) {
      message.error(messages('expense-12.key141')/*里程数不能小于或等于前面一位数*/);
      return;
    } else {
      value.splice(value.length - 1, 0, Number(inputValue));
    }
    this.setState({ inputVisible: false }, this.props.onChange(value));
  };

  render() {
    const { inputVisible } = this.state;
    const { value } = this.props;

    return (
      <section className="ladder-mileage">
        <h3>
          {messages('expense-12.key142')/*阶梯里程设置*/}
        </h3>
        <div className='ladder-mileage-line'/>
        <p
          className="tip-content">{messages('expense-12.key143')/*请输入阶梯里程数，数字从小到大输入，最多一位小数；数字之间以【Enter】分隔，中间不能有空格。*/}{/*请输入阶梯里程数，数字从小到大输入，最多一位小数；数字之间以【Enter】分隔，中间不能有空格*/}</p>
        <p
          className="tip-content">{messages('expense-12.key144')/*范例：输入100/200/300，则：0.00＜第一阶梯≤100.00，100.00＜第二阶梯≤200.00，200.00＜第三阶梯≤300.00，300.00＜第四阶梯≤无限*/}{/*范例：输入100/200/300，则：0＜第一阶梯≤100.0，100.0＜第二阶梯≤200.0，200.0＜第三阶梯≤300.0，300.0＜第四阶梯≤无限*/}</p>
        <Row>
          <Col span={2}>
            <Button disabled>0</Button>
          </Col>
          <Col span={1}><span className="line">-</span></Col>
          <Col span={14} className='tag-line'>
            <div>
              {value.slice(1,value.length -1).map(tag => {
                const isLongTag = tag.length > 20;
                let showTag = tag;
                if (typeof tag === 'number') {
                  showTag = tag.toFixed(2);
                }
                const tagElem = (
                  <Tag
                    color='#4B8DFF'
                    key={tag}
                    closable={true}
                    afterClose={() => this.handleClose(tag)}>
                    {isLongTag ? `${tag.slice(0, 20)}...` : showTag}
                  </Tag>
                );
                return isLongTag ? <Tooltip title={showTag}>{tagElem}</Tooltip> : tagElem;
              })}
              {inputVisible && (
                <Input
                  ref={this.saveInputRef}
                  type="text" size="small"
                  style={{ width: 78 }}
                  onChange={this.handleInputChange}
                  onBlur={this.handleInputConfirm}
                  onPressEnter={this.handleInputConfirm}
                />
              )}
              {!inputVisible && (
                <Button
                  size="small"
                  type="dashed"
                  onClick={this.showInput}>
                  + {messages('expense-12.key145')/*新的里程*/}{/*新的里程*/}
                </Button>
              )}
            </div>
          </Col>
          <Col span={1}><span className="line">-</span></Col>
          <Col span={2}>
            <Button disabled>{messages('expense-12.key146')/*无限*/}{/*无限*/}</Button>
          </Col>
          <Col span={2}/>
        </Row>
      </section>
    );
  }
}

export default LadderMileage;

